<template>
  <div class="tool-box">
    <ul>
      <li
        v-for="item in tools"
        :key="item.value"
        @click="handleClick(item.value)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div v-if="isWork">
      <component
        :is="curTool"
        :isVisible="visible"
        @handleVisible="handleVisible"
      ></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tools: [
        {
          name: "制图",
          value: "ExportMap",
        },
        {
          name: "绘制",
          value: "Plot",
        },
      ],
      curTool: "",
      visible: false,
    };
  },
  computed: {
    isWork() {
      return this.curTool ? true : false;
    },
  },
  created() {
    this.tools.forEach((item) => {
      this.$options.components[item.value] = () =>
        import(`./${item.value}/index.vue`);
    });
  },
  methods: {
    handleClick(val) {
      if (this.curTool == val) {
        this.curTool = "";
      } else {
        this.curTool = val;
        this.visible = true;
      }
    },
    handleVisible(val) {
      this.visible = val;
      this.curTool = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.tool-box {
  position: absolute;
  top: 50px;
  right: 10px;

  & > ul {
    list-style: none;
    background-color: #1f6b757e;
    color: white;

    li {
      padding: 5px 10px;
      border-bottom: 1px solid white;
      cursor: pointer;

      &:hover {
        background-color: #1f6b75;
      }
    }
  }
}
</style>
